<template>
	
	<div id="login">
		
		<div class="navBar">
			<span class="title">登录</span>
		</div>
		<ul class="ulBox">
			<li @tap="changeIdentity($event)" v-for="(item,index) in statusform" :key="index" :data-name="item.status">
				{{item.status}}
			</li>
		</ul>

		<div class="loginBoxTeacher" v-if="status=='教职工'">
			<img src="../../static/image/hzl.png" alt="">
			<view v-for="(item,index) in teacherForm" :key="index">
				<uni-section title="图标" subTitle="使用 prefixIcon / suffixIcon 属性 ,可以自定义输入框左右侧图标" :type=item.line padding
					v-if="item.Picker">
					<uni-easyinput prefixIcon="person-filled" v-model="item.value" :placeholder=item.placeholder
						@iconClick="iconClick" :type=item.type>
					</uni-easyinput>
				</uni-section>
				<uni-data-picker :localdata="classs" :popup-title=item.placeholder @change="onchange"
					:placeholder=item.placeholder v-else @nodeclick="onnodeclick"></uni-data-picker>
			</view>
			<div style="width: 428rpx;height: 70rpx;background-color: #5BCA9B;margin: auto;border-radius: 40rpx;line-height: 70rpx;color: #fff;"
				@tap="login();">登录</div>
		</div>
		<div class="loginBoxParents" v-else-if="status=='家长'">
			<img src="../../static/image/hzl.png" alt="">
			<view v-for="(item,index) in ParentsForm" :key="index">
				<uni-section title="图标" subTitle="使用 prefixIcon / suffixIcon 属性 ,可以自定义输入框左右侧图标" :type=item.line padding
					v-if="item.Picker">
					<uni-easyinput prefixIcon="person-filled" v-model="item.value" :placeholder=item.placeholder
						@iconClick="iconClick">
					</uni-easyinput>
				</uni-section>
				<uni-data-picker :localdata="classs" :popup-title=item.placeholder @change="onchange"
					:placeholder=item.placeholder v-else @nodeclick="onnodeclick"></uni-data-picker>
			</view>
			<div style="width: 428rpx;height: 70rpx;background-color: #5BCA9B;margin: auto;border-radius: 40rpx;line-height: 70rpx;color: #fff;"
				@tap="register()">注册</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
				department: [{
					text: "电教",
					value: "1-0",
					children: [{
							text: "电教某某部门1",
							value: "1-1"
						},
						{
							text: "电教某某部门2",
							value: "1-2"
						},
						{
							text: "电教某某部门3",
							value: "1-3"
						}
					]
				}, {
					text: "后勤",
					value: "2-0",
					children: [{
						text: "后勤某某部门1",
						value: "2-1"
					}, {
						text: "后勤某某部门2",
						value: "2-2"
					}, {
						text: "后勤某某部门3",
						value: "2-3"
					}]
				}],
				classs: [{
						text: "一年级",
						value: "1-0",
						children: [{
								text: "一年级(1)班",
								value: "1-1"
							},
							{
								text: "一年级(2)班",
								value: "1-2"
							},
							{
								text: "一年级(3)班",
								value: "1-3"
							}
						]
					},
					{
						text: "二年级",
						value: "2-0",
						children: [{
								text: "二年级(1)班",
								value: "2-1"
							},
							{
								text: "二年级(2)班",
								value: "2-2"
							},
							{
								text: "二年级(3)班",
								value: "2-3"
							}
						]
					},
					{
						text: "三年级",
						value: "3-0",
						children: [{
								text: "三年级(1)班",
								value: "3-1"
							},
							{
								text: "三年级(2)班",
								value: "3-2"
							},
							{
								text: "三年级(3)班",
								value: "3-3"
							}
						]
					},
					{
						text: "四年级",
						value: "4-0",
						children: [{
								text: "四年级(1)班",
								value: "4-1"
							},
							{
								text: "四年级(2)班",
								value: "4-2"
							},
							{
								text: "四年级(3)班",
								value: "4-3"
							}
						]
					},
					{
						text: "五年级",
						value: "5-0",
						children: [{
								text: "五年级(1)班",
								value: "5-1"
							},
							{
								text: "五年级(2)班",
								value: "5-2"
							},
							{
								text: "五年级(3)班",
								value: "5-3"
							}
						]
					},
					{
						text: "六年级",
						value: "6-0",
						children: [{
								text: "六年级(1)班",
								value: "6-1"
							},
							{
								text: "六年级(2)班",
								value: "6-2"
							},
							{
								text: "六年级(3)班",
								value: "6-3"
							}
						]
					},
				],
				chooseValue: "",
				list: [{
					id: 1,
					content: '张三'
				}, {
					id: 2,
					content: '李四'
				}, {
					id: 3,
					content: '王五'
				}],
				teacherForm: [{
						placeholder: "请输入手机号",
						Picker: true,
						icon: "line",
						type: "text",
						value: ""
					},
					{
						placeholder: "请输入密码",
						Picker: true,
						icon: "line",
						type: "password",
						value: ""
					}
				],
				ParentsForm: [{
						placeholder: "请输入手机号",
						Picker: true,
						icon: "line",
						type: "text",
						value: "",
						str:"userName"
					},
					{
						placeholder: "请设置密码",
						Picker: true,
						icon: "line",
						type: "password",
						value: "",
						str:"passWord"
					},
					{
						placeholder: "请确认设置密码",
						Picker: true,
						icon: "line",
						type: "password",
						value: "",
						str:'rePassWord'
					},
					{
						placeholder: "请输入孩子的身份证号",
						Picker: true,
						icon: "line",
						type: "text",
						value: "",
						str:"numberId"
					},

				],
				StaffForm: [{
						placeholder: "请输入手机号",
						Picker: true,
						icon: "line",
						type: "text",
						value: ""
					},
					{
						placeholder: "请输入密码",
						Picker: true,
						icon: "line",
						type: "password",
						value: ""
					}
				],
				status: "教职工",
				statusform: [{
						status: "教职工"
					},
					{
						status: "家长"
					}
				],

				tform: {
					name: "",
					phone: "",
					class: "",
					password: "",
					password1: "",
				},
				value: '',
			}

		},
		created() {
			uni.getUserInfo({
				provider: 'weixin',
			})
			uni.login({
			  provider: 'weixin', 
			  scopes:"auth_user",
			  onlyAuthorize:true,
			  success: function (appleInfo) {
				  console.log(appleInfo.code,"this is code");
				  uni.setStorageSync('CODE', appleInfo.code);
			  },
			});	
		},
		methods: {
			goHome() {
				uni.navigateTo({
					url: '/pages/home/index'
				});
			},
			onchange(e) {
				const value = e.detail.value
			},
			onnodeclick(node) {
				console.log(123);
			},
			login() {
				// let temporaryCode=uni.getStorageSync('CODE')
				// uni.request({
				//     url: 'http://api.tongxintongyu.com:5001/api/WeiXin/GetOpenId', 
				//     data: {
				//         AppId: 'wxc049ba06d645dde5',
				// 		Secret:"f049884a8a45ff2569c333181ba62fc7",
				// 		Code:temporaryCode,
				//     },
				//     success: (res) => {
				// 		 uni.setStorageSync('openid', res.data.openid);
				// 		let data={
				// 			phone:"",
				// 			password:"",
				// 		}
				// 		for(let i=0;i<this.teacherForm.length;i++){
				// 			data.phone=this.teacherForm[0].value,
				// 			data.password=this.teacherForm[1].value
				// 		}
				// 		uni.request({
				// 		    url: 'http://api.tongxintongyu.com:5001/api/Bussiness/Login', 
				// 			data,
				// 			method:'post',
				// 		    success: (res) => {
				// 				if(res.statusCode===200){
				// 					console.log(res);
									uni.navigateTo({
										url: '/pages/home/index'
									});
				// 				} else if(res.data.errors.ValidationRules[0]="用户名或密码错误"){
				// 					wx.showToast({
				// 					      title:"账号或密码错误" ,
				// 					      icon: 'error',  
				// 					      duration: 2000    
				// 					})
				// 				}
								
				// 		    }
				// 		});
				//     }
				// });
				
				
			},
			register() {
				let temporaryCode=uni.getStorageSync('CODE')
				uni.request({
				    url: 'http://api.tongxintongyu.com:5001/api/WeiXin/GetOpenId', 
				    data: {
				        AppId: 'wxc049ba06d645dde5',
						Secret:"f049884a8a45ff2569c333181ba62fc7",
						Code:temporaryCode,
				    },
				    success: (res) => {
						 uni.setStorageSync('openid', res.data.openid);
						let data={
							  userName:"",
							  password:"",
							  rePassword:"",
							  numberId:"",
							  openId: "",
						}
						for(let i=0;i<this.ParentsForm.length;i++){
							console.log(this.ParentsForm[i].value);
							data.phone=this.ParentsForm[0].value,
							data.userName=this.ParentsForm[0].value,
							data.password=this.ParentsForm[1].value,
							data.rePassword=this.ParentsForm[2].value,
							data.numberId=this.ParentsForm[3].value,
							data.openId=res.data.openid
						}
						uni.request({
						    url: 'http://api.tongxintongyu.com:5001/api/Bussiness/UserRegister', 
							data,
							method:'post',
						    success: (res) => {
								if(res.statusCode===200){
									uni.navigateTo({
										url: '/pages/home/index'
									});
								} else{
									wx.showToast({
									      title:res.data.errors.ValidationRules[0] ,
									      icon: 'error',  
									      duration: 2000    
									})
								}
						    }
						});
				    }
				});
				
			},
			changeIdentity(e) {
				this.status = e.currentTarget.dataset.name
			},
			change(e) {
				console.log('chooseValue', this.chooseValue)
			},
		}

	}
</script>

<style>
	#login {
		height: 100%;
		background: url("../../static/image/txbj.png");
	}

	.navBar {
		height: 72rpx;
		padding-top: 84rpx;
		position: relative;
	}

	.navBar>span {
		margin: auto;
	}

	#icon {
		margin-left: 69rpx;
		font-size: 18px;
	}

	.title {
		color: #FFF;
		position: absolute;
		left: 50%;
		transform: translate(-50%)
	}

	.ulBox {
		margin: auto;
		color: #FFF;
		width: 90%;
		display: flex;
		justify-content: space-around;
		margin-top: 40rpx;
	}

	.loginBoxTeacher {
		padding-top: 85rpx;
		width: 592rpx;
		margin: 0 auto;
		height: 602rpx;
		background: url("../../static/image/登录框-老师.png") no-repeat;
		background-size: 100%;
		text-align: center;
		border-radius: 20rpx;
		/* border: 1px solid red; */
	}

	.loginBoxTeacher>img {
		width: 148rpx;
		height: 148rpx;
		margin-bottom: 21rpx;
	}

	.loginBoxParents {
		padding-top: 85rpx;
		width: 592rpx;
		margin: 0 auto;
		height: 800rpx;
		background: url("../../static/image/登录框-员工.png") no-repeat;
		background-size: 100%;
		text-align: center;
		border-radius: 30rpx;
	}

	.loginBoxParents>img {
		width: 148rpx;
		height: 148rpx;
		margin-bottom: 21rpx;
	}



	.loginBoxStaff>img {
		width: 148rpx;
		height: 148rpx;
		margin-bottom: 21rpx;
	}

	/deep/.input-value {
		width: 428rpx;
		margin: auto;
		margin-bottom: 55rpx;
		border-radius: 50rpx !important;
	}
</style>